<template>
  <div>
    <el-dialog 
    :showCancel="showCancel" 
    :width="width" 
    :top="top" 
    class="cust_dialog" 
    :title="title"
    :show-close="showClose" 
    :draggable="true" 
    :model-value="show" 
    :close-on-click-model="false">
      <div class="dialog_body">
        <slot></slot>
      </div>
      <template v-if="buttons && buttons.length > 0 || showCancel">
        <div class="dialog_footer">
          <el-button link size="small" @click="close">取消</el-button>
          <el-button v-for="btn in buttons" size="small" :key="btn.text" :type="btn.type" @click="btn.click">{{
            btn.text
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>

import { defineProps, reactive } from 'vue';

const props = defineProps({
  title: {
    type: String,
  },
  show: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  top: {
    type: String,
    default: '50px'
  },
  width: {
    type: String,
    default: '50%'
  },
  buttons: {
    type: Array,
    default: []
  }
})

const emit = defineEmits()
const close = () => {
  console.log('123');
  emit('close')
}



</script>
<style lang="scss">
.cust_dialog {
  .dialog_body {
    padding: 0px;
  }

  .dialog_body {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 15px;
    min-height: 80px;
  }

  .dialog_footer {
    text-align: right;
    padding: 5px 20px;
  }
}
</style>